import React from 'react'
import { Route } from 'react-router-dom'

import News from '../News'
import Index from '../Index'
import HouseList from '../HouseList'
import Profile from '../Profile'

import { TabBar } from 'antd-mobile'
import './index.css'

export default class Home extends React.Component {
  state = {
    selectedTab: this.props.location.pathname
  }

  componentDidUpdate(prevProps) {
    if(prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        selectedTab: this.props.location.pathname
      })
    }
  }

  tabItems = [{
    title: '首页',
    icon: 'icon-ind',
    path: '/home',
  },{
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list',
  },{
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news',
  },{
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile',
  }]

  renderTabBar() {
    return ( 
      <TabBar tintColor="#21b97a" noRenderContent={true} barTintColor="white">
        { this.tabItems.map(item => {
          return (
            <TabBar.Item
              title={item.title}
              key={item.icon}
              icon={<i className={`iconfont ${item.icon}`} />}
              selectedIcon={<i className={`iconfont ${item.icon}`} />}
              selected={this.state.selectedTab === item.path}
              onPress={() => {
                this.setState({
                  selectedTab: item.path
                })
                this.props.history.push(item.path)
              }}
              data-seed="logId"
            />
          )
        } ) }
      </TabBar>
    )
  }

  render() {
    return (
      <div className="home">
        <Route path="/home/news" component={News} />
        <Route path="/home" component={Index} exact />
        <Route path="/home/list" component={HouseList} />
        <Route path="/home/profile" component={Profile} />

        {/* 导航菜单 */}
        { this.renderTabBar() }
      </div>
    )
  }
}
